<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';
import type { ID } from '#/api/common';

import { onMounted } from 'vue';

import { Page } from '@vben/common-ui';

import { Image, Spin } from 'ant-design-vue';

import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { tycCustomerPage } from '#/api/company/tyc/customer';
import { tycSupplierPage } from '#/api/company/tyc/supplier';

import { businessCustomerColumns, businessSupplierColumns } from '../details';

const props = defineProps<{ tycCompanyId: ID }>();

const customerGridOptions: VxeGridProps = {
  columns: businessCustomerColumns,
  height: 'auto',
  keepSource: true,
  pagerConfig: {
    enabled: true,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
        if (!props.tycCompanyId) {
          return { rows: [], total: 0 };
        }
        return await tycCustomerPage({
          tycCompanyId: props.tycCompanyId,
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },

  id: 'company-tyc-customer-index',
  showOverflow: true,
};

const [CustomerTable, customerTableApi] = useVbenVxeGrid({
  gridOptions: customerGridOptions,
});

const supplierGridOptions: VxeGridProps = {
  columns: businessSupplierColumns,
  height: 'auto',
  keepSource: true,
  pagerConfig: {
    enabled: true,
  },
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues = {}) => {
        if (!props.tycCompanyId) {
          return { rows: [], total: 0 };
        }
        return await tycSupplierPage({
          tycCompanyId: props.tycCompanyId,
          pageNum: page.currentPage,
          pageSize: page.pageSize,
          ...formValues,
        });
      },
    },
  },
  rowConfig: {
    keyField: 'id',
  },
  id: 'company-tyc-supplier-index',
  showOverflow: true,
};

const [SupplierTable, supplierTableApi] = useVbenVxeGrid({
  gridOptions: supplierGridOptions,
});

onMounted(() => {
  console.log(customerTableApi, supplierTableApi);
  console.log('tycCompanyId', props.tycCompanyId);
});
</script>

<template>
  <Page
    :auto-content-height="true"
    content-class="flex flex-col 2xl:flex-row gap-4 p-0"
  >
    <div class="mb-[20px] flex-1 overflow-hidden">
      <CustomerTable>
        <template #table-title>
          <main-title text="客户列表" />
        </template>
        <template #clientName="{ row }">
          <div class="flex items-center justify-center gap-2">
            <Image v-if="row.logo" :src="row.logo" height="30px">
              <template #placeholder>
                <div class="flex size-full items-center justify-center">
                  <Spin />
                </div>
              </template>
            </Image>
            <span>{{ row.clientName }}</span>
          </div>
        </template>
      </CustomerTable>
    </div>
    <div class="flex-1 overflow-hidden">
      <SupplierTable>
        <template #table-title>
          <main-title text="供应商列表" />
        </template>
        <template #supplierName="{ row }">
          <div class="flex items-center justify-center gap-2">
            <Image v-if="row.logo" :src="row.logo" height="30px">
              <template #placeholder>
                <div class="flex size-full items-center justify-center">
                  <Spin />
                </div>
              </template>
            </Image>
            <span>{{ row.supplierName }}</span>
          </div>
        </template>
      </SupplierTable>
    </div>
  </Page>
</template>
